import React, {Component}    from 'react';
import {
    StyleSheet,
    View,
    Image,
    Dimensions
} from 'react-native';
import BaseNavigationBar     from '../../views/BaseNavigationBar';
// import SYImagePicker         from 'react-native-syan-image-picker'
// import ActionSheet           from 'react-naive-highly-customizable-action-sheet'
import * as BaseAPI          from "../../utils/BaseAPI";
import StorageUtil           from "../../utils/StorageUtil";
const {width} = Dimensions.get('window');

export default class ModifyHeadScreen extends Component {

    popToBack(){
        // this.props.navigation.goBack()
        this.props.navigator.pop();
    }

    constructor(props) {
        super(props);
        this.state = {
            showProgress:false,
            Uid:''
        };
    }

    goModifyHead(){
        // this.actionsheet.show();
    }


    componentWillMount() {
        StorageUtil.get('token',(error,object)=>{
            if (!error && object != null)
            {
                this.getUserInfoData(object.token);
            }
        });
    }

    getUserInfoData(token){
        this.setState({showProgress:true});
        fetch(BaseAPI.GetUserInfoDataUrl+token, {
            method:'GET',
        }).then((res)=>res.json())
            .then((json)=>{
                this.setState({showProgress:false});
                if (json.ret === 0){
                    this.setState({Uid:json.user.uid});

                }else{
                    this.refs.toast.show('获取用户信息失败');
                }
            })
            .catch((e)=>{
                this.setState({showProgress:false});
                this.refs.toast.show('网络请求出错：' + e);
            })
    }


    // goModifyHead = async()=>{
    //     SYImagePicker.showImagePicker({imageCount:2, isRecordSelected: true}, (err, photos) => {
    //         console.log(err, photos);
    //         if (!err) {
    //             console.log('照片选择结果'+photos+ JSON.stringify(photos));
    //             this.setState({
    //                 // photos
    //                 headUrl:photos[0].uri
    //             })
    //         }
    //     })
    //
    //     // SYImagePicker.removeAllPhoto()
    //     // try {
    //     //     const photos = await SYImagePicker.asyncShowImagePicker({imageCount: 1, isCrop: true, showCropCircle: true});
    //     //     console.log('裁剪数据'+photos + JSON.stringify(photos) + photos[0].uri);
    //     //
    //     //     // 选择成功
    //     //     this.setState({
    //     //         // photos: [...this.state.photos, ...photos]
    //     //         // photos: [...this.state.photos, ...photos]
    //     //         headUrl:photos[0].uri
    //     //     })
    //     // } catch (err) {
    //     //     // 取消选择，err.message为"取消"
    //     // }
    //
    // }


    // 拍照
    handleLaunchCamera(){
        // SYImagePicker.openCamera({isCrop: true, showCropCircle: true, showCropFrame: false}, (err, photos) => {
        //     console.log(err, photos);
        //     if (!err) {
        //         this.setState({
        //             // photos: [...this.state.photos, ...photos]
        //             headUrl:photos[0].uri
        //         })
        //     }
        // })
    }

    // 选择照片
    handleOpenImagePicker(){
        // SYImagePicker.showImagePicker({imageCount:9, isRecordSelected: true}, (err, photos) => {
        //     console.log(err, photos);
        //     if (!err) {
        //         console.log('照片选择结果'+photos+ JSON.stringify(photos));
        //         this.setState({
        //             // photos
        //             headUrl:photos[0].uri
        //         })
        //     }
        // })
    }

    render() {
        return (
            <View style={styles.container}>
                <BaseNavigationBar
                    title={'个人头像'}
                    leftImageSource={require('../../../images/other/ic_back.png')}
                    leftItemFunc={() => this.popToBack()}
                    // rightImageSource={require('../../../images/other/ic_back.png')}
                    // rightItemFunc={() => this.goModifyHead()}
                />

                <View style={styles.imageHeadViewStyle}>
                    <Image
                        ref={'head'}
                        style={styles.imageHeadStyle}
                           source={{url:BaseAPI.GetUserAvatarDataUrl+this.state.Uid}}/>
                </View>

                {/*<ActionSheet*/}
                    {/*// mainTitle="选择"*/}
                    {/*itemTitles = {["拍照","手机相册"]}*/}
                    {/*selectionCallbacks = {[this.handleLaunchCamera,this.handleOpenImagePicker]}*/}
                    {/*mainTitleTextAlign = 'center'*/}
                    {/*ref={(actionsheet)=>{this.actionsheet=actionsheet}}*/}
                    {/*contentBackgroundColor = 'white'*/}
                    {/*cancelTitle='取消'*/}
                    {/*// bottomSpace = {10}*/}
                    {/*// cancelVerticalSpace = {10}*/}
                    {/*// borderRadius = {5}*/}
                    {/*// sideSpace = {6}*/}
                    {/*itemTitleColor = '#333333'*/}
                    {/*cancelTitleColor = 'red'*/}
                {/*/>*/}

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    imageHeadViewStyle:{
        justifyContent:'center',
        alignItems:'center',
        height:0.56*500,
        marginTop:width/8
    },

    imageHeadStyle:{
        // width:width,
        width:width,
        height:0.56*500
    }
});
